<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="10">
        <a-card
          title="工资占比"
          :bordered="false"
          :hoverable="true"
          style="width: 100%"
          id="main">
          <div ref="usedmemory" id="twChart" style="height: 420px;width: 100%;" />
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card title="年度收入" :bordered="false" :hoverable="true" style="width: 100%">
          <div ref="commandstats" id="tcChart" style="height: 420px;width: 100%;" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { divSizeChange } from '@/utils/util'
// import { selectSummaryByIndex } from '@/api/century/hr/wageSummary'

export default {
  name: 'Common',
  data () {
    return {
      // 模块1
      commandstats: null,
      // 模块2
      usedmemory: null,
      lookWages: false,
      lookMerits: false,
      lookYear: false,
      wages: 0,
      merits: 0,
      year: 0
    }
  },
  created () {

  },
  mounted () {
    // selectSummaryByIndex().then(response => {
    //   if (response.data) {
    //     this.wages = response.data.actualWage// 工资汇总
    //     this.merits = response.data.otherAmount// 绩效汇总
    //     this.year = response.data.otherWageAmount// 年终奖励
    //   }
    //   console.log(response, '我的出参')
    // })
    this.drawLine()
    this.drawPie()
    // 大小自适应
    var ary = ['twChart', 'tcChart']
    divSizeChange('ant-col-10', this, ary)
  },
  methods: {
    getLookWages () {
      this.lookWages = !this.lookWages
    },
    getLookMerits () {
      this.lookMerits = !this.lookMerits
    },
    getLookYear () {
      this.lookYear = !this.lookYear
    },
    drawPie () {
      this.usedmemory = echarts.init(this.$refs.usedmemory, 'macarons')
      this.usedmemory.setOption({
        // title: {
        //   text: '工资占比'
        //   // subtext: '工资'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b} {c}元'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            roseType: 'area',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              color: 'rgba(0, 0, 0)',
              formatter: '{b} {c}元'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: [
              { value: 3500, name: '基本工资' },
              { value: 0, name: '五险一金' },
              { value: 0, name: '奖惩补贴' },
              { value: 1900, name: '各类绩效' },
              { value: 0, name: '其它收支' }
            ]
          }
        ]
      })
    },

    drawLine () {
      this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
      this.commandstats.setOption({
        // title: {
        //   text: '员工每月工资'
        //   // subtext: '工资'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}\n{c}元'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [5600, 5400, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: 'bar',
            // showBackground: true,//去掉背景阴影
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {
              show: true,
              position: 'top',
              valueAnimation: true
            }
          }
        ]
      })
    },
    personnelInfo () {
      this.$router.push({ path: '/hr/personnelInfo' })
    },
    attendance () {
      this.$router.push({ path: '/hr/attendance' })
    },
    insurance () {
      this.$router.push({ path: '/hr/insurance' })
    },
    personnelYearBonus () {
      this.$router.push({ path: '/yearBonus/personnelYearBonus' })
    },
    personnelWageSummary () {
      this.$router.push({ path: '/mainWageSummary/personnelWageSummary' })
    },
    wageDetails () {
      this.$router.push({ path: '/mainWageSummary/wageDetails' })
    }
  }
}
</script>

<style scoped>

</style>
